/*
  学习目标：掌握嵌套路由的使用

*/
import React, { Component } from 'react';
import './index.css';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
export default class App extends Component {
  render() {
    return (
      <Router>
        <NavLink to="/home/123" activeClassName="xxx" exact>
          点我调到首页
        </NavLink>
        <br />
        <NavLink to="/my">点我调到我的</NavLink>
        <br />
        <NavLink to="/friend">点我调到朋友</NavLink>
        <div>
          <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/my" component={MyMusic}></Route>
            <Route path="/friend" component={Friend}></Route>

            <Route component={NotFound}></Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

function Friend() {
  return (
    <div>
      <h1>我是朋友组件</h1>
      {/* 在父组件中再使用一次Switch + Route */}
      {/* 嵌套路由中： 父子级路径可以同名。 两个组件都会显示 */}
      {/* 💥 注意：1. 嵌套路由中不需要在使用Router组件 */}
      {/* 💥 注意：2. 嵌套路由中父组件一般不能使用exact */}
      {/* 💥 注意：3. 跳转路由的Link组件，要从/一级路径开始写 */}
      <Link to="/friend/friend1">调到朋友1</Link>
      <Link to="/friend/friend2">调到朋友2</Link>
      <Link to="/friend/friend3">调到朋友3</Link>

      <Switch>
        <Route path="/friend/friend1" component={Friend1}></Route>
        <Route path="/friend/friend2" component={Friend2}></Route>
        <Route path="/friend/friend3" component={Friend3}></Route>
      </Switch>
    </div>
  );
}

function NotFound() {
  return <div>404页面</div>;
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend1() {
  return <i>我是朋友组件1</i>;
}
function Friend2() {
  return <i>我是朋友组件2</i>;
}
function Friend3() {
  return <i>我是朋友组件3</i>;
}

// 0. 新建三个子组件
// 在父组件内，使用Switch + Route组件
// 注意： 不能使用Router
//   父组件一般不能使用exact
// 二级路由跳转，从/+一级路由/二级路由
